<template>
    <view class="pub_dialog">
        <div class="d_box">
            <div class="d_title pub_font" :style="{'color':dialog_config.title_color}">{{dialog_config.title}}</div>
            <div class="d_content pub_font" v-html="dialog_config.content" :style="{'text-align':dialog_config.content_align}"></div>
            <div class="d_btns">
                <!-- :style="{'color':li.color,'background-image':`linear-gradient(to right, ${li.bg_1},${li.bg_2})`}" -->
                <div class="d_btn pub_font" v-for="(li,key) in dialog_config.btn_list" :key="key" @click="btnClick(key)">{{li.txt}}</div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    props: {
        //组件标识
        dialogName: {
            type: String,
            default: '',
        },
        //配置
        dialogConfig: {
            type: Object,
            default: () => { return {} }
        },
    },
    data() {
        return {
            dialog_config: {
                title: '提示',//标题栏内容
                title_color: '#fff',//标题栏内容
                content: '是否确定进行当前操作？',//标题栏内容
                content_align: 'center',//内容居中还是居左
                btn_list: [{
                    txt: '取消',
                    color: '#fff',
                    // bg_1: '#bbb',
                    // bg_2: '#bbb',
                }, {
                    txt: '确定',
                    color: '#fff',
                    // bg_1: '#333',
                    // bg_2: '#333'
                }]
            },
        };
    },
    watch: {
        dialogConfig: {
            handler() {
                // console.log(JSON.stringify(this.dialogConfig));
                if (JSON.stringify(this.dialogConfig) != '{}') {
                    //根据初始值进行判断 更新传入的键值对数据
                    for (let key in this.$options.data().dialog_config) {
                        if (key in this.dialogConfig) {
                            this.dialog_config[key] = this.dialogConfig[key];
                        }
                    }
                } else {
                    Object.assign(this.$data.dialog_config, this.$options.data().dialog_config);
                }
            },
            immediate: true,
            deep: true
        },
    },
    onLoad() { },
    methods: {
        btnClick(key) {
            this.$emit('dialogBack', {
                key: key,
                name: this.dialogName
            });
        }
    },
};
</script>

<style lang="scss" scoped>
</style>
